<template>
  <div class="top">
      <div class="iu">
          <span class="iconfont icon-xiangzuo" @click="func()"></span>
          <span class="brandname">{{brandname}}</span>
      </div>
          
          <div class="io">
              <div class="ii">
                  <van-cell class="iconfont icon-fenxiang"  @click="showShare = true" />
            <van-share-sheet
                v-model="showShare"
                title="立即分享给好友"
                :options="options"
                @select="onSelect"
            />
              </div>
            
          </div>
          
      </div>
</template>

<script>
import { Toast } from 'vant';
export default {
    props:{
        brandname:String
    },
    data() {
    return {
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
    };
  },
    methods:{
        onSelect(option) {
            Toast(option.name);
            this.showShare = false;
        },
        fun(){
            this.$toast({
                message: '恭喜，收藏成功',
                position: 'bottom',
            });
        },
        func(){
            this.$router.push("/home")
        }
    }
}
</script>

<style scoped>
    .top{
        width: 100%;
        height: 0.4rem;
        background-color: white;
        display: flex;
        justify-content: space-between;
        line-height: 0.4rem;
        position: relative;
    }
    .top span{
        font-size: 0.2rem;
        color: brown;   
        display: block;
        float: left;
        /* text-align: center; */
    }
    .iu{
        /* width: 40%; */
        position: absolute;
        top: 0;
    }
    .iu .iconfont{
        margin-left: 0.1rem;
    }
    .io{
        display: flex;
        position: absolute;
        right: 0;
        justify-content: space-between;
    }
     .top .brandname{
       font-size: 0.16rem;
       color: black;
       margin-left: 0.1rem;
   }
    .top>span{
        margin-left: 0.1rem;
    }
    .io span{
        margin-right: 0.1rem;
    }
    .ii{
        color: brown;
    }
    .ii .iconfont{
        font-size: 0.2rem;
        margin-bottom: 0.2rem;
    }
    .van-cell{
        color: brown;
        background-color: rgba(0, 0, 0, 0.01);
    }
</style>